/*
 * @Author: lei 2677065112@qq.com
 * @Date: 2022-10-03 15:05:26
 * @LastEditors: 大国男儿 7824741+lc2677@user.noreply.gitee.com
 * @LastEditTime: 2022-10-07 16:05:08
 * @FilePath: \vue-admin-template\src\utils\request.js
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import axios from 'axios'
import { Message } from 'element-ui'// 引入提示框
import store from '@/store'

const service = axios.create({
  // process.env是node.js内置的固定环境变量对象
  baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
  timeout: 5000 // request timeout
})

// request： 请求 前->后
// response：响应 后->前

// views页面 -> 调用api接口方法 -> request.js中service（axios方法）-> 再执行请求拦截器
// 参数1：箭头函数体 -> 发起请求之前走这里（必须return 请求配置对象）
// 参数2：箭头函数体 -> error
// 请求拦截器
service.interceptors.request.use(
  config => {
    const token = store.getters.token
    if (token) {
      config.headers['Authorization'] = `Bearer ${token}`
    // 后台解析的方法要求必须前面拼接一个Bearer 和空格的字符串
    }
    return config
  },
  error => {
    // do something with request error
    console.log(error) // for debug
    return Promise.reject(error)
  }
)

// 响应拦截器
service.interceptors.response.use(
  response => {
    // 后台成功/失败都是200，如何区分呢，使用success字段
    // response参数，axios响应对象（里面config/header/status/data字段）
    // data字段里对应的是后台返回的全部数据
    // 第一个data：是axios自带的
    // 第二个data：是后台返回数据对象的
    const { success, message } = response.data
    if (success) {
      // 返回给逻辑页面的直接是后台完整数据对象，不再是axios封装的response对象
      return response.data
    } else {
      // 逻辑失败（把后台返回message提示文字返回到逻辑页面）
      Message.error(message)
      return Promise.reject(message)
    }
  },
  error => {
    // 4xx响应状态，如果后台返回了相应数据，就使用，如果没有，就用error本身message的值
    // && 防止null.data报错
    Message.error((error.response && error.response.data && error.response.data.message) || error.message)
    return Promise.reject(error)
  }
)

export default service
